<template>
  <div class="flex flex-col">
    <div class="text-xl">{{ tableTitle }}</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Reputation" prop="reputation" width="110">
        <template #default="scoped">
          <el-tag class="ml-2" type="success">{{ scoped.row.problem_reputation }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="!answerList" label="Title" prop="problem_title" />
      <el-table-column v-else label="Title" prop="problem_content" />
      <el-table-column label="Date" prop="create_time" width="110" />
    </el-table>
  </div>

</template>

<script lang="ts" setup>
import { queryAllAnswerByUser, queryAllQuestionByUser } from "@/utils/api/questions";
import { defineProps, onMounted, ref } from "vue";

const props = defineProps({
  tableTitle: String,
  answerList: Boolean
});

const tableData = ref([]);


onMounted(() => {
  if (props.answerList) {
    queryAllAnswerByUser(0, 4).then((res) => {
      tableData.value = res.data;
    });
  } else {
    queryAllQuestionByUser(0, 4).then((res) => {
      tableData.value = res.data;
    });
  }

});

</script>

<style scoped>

</style>
